*{
    padding: 0;
    margin: 0;
}
.regular_width{
    min-width: 320px;
    max-width: 750px;
}
body{
    .regular_width();
    margin: 0 auto;
    background: white;
    .mint-toast{
        z-index: 2005;
    }
}
img{
    width: 100%;
    height: 100%;
    z-index: 11;
}
img[lazy="loading"] {
    width: 40px;
    height: 100%;
    display: block;
    margin: auto
}
a{
    text-decoration: none;
    color: #ccc;
    display: inline-block;
}
button{
    display: block;
    border: none;
    outline: none;
    background: none;
}
input{
    border: none;
    outline: none;
}
.icon_img{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px;
}
.iconfont{
    display: inline-block;
    font-family: "icomoon";
    font-style: normal;
    font-size: 13px;
}
#app{
    >.mint-header{
        .regular_width();
        margin:0 auto;
        background: white;
        >.mint-header-button{
            flex:0;
            &:nth-of-type(2){
                margin-left: 30px;
                flex: 1;
                >div{
                    flex: 1;
                    height: 40px;
                    >.icon_img{
                        width: 26px;
                        height: 26px;
                        margin-left: 6px;
                    }
                }
            }
        }
        >.mint-header-title{
            flex: 0;
        }
    }
    >.mint-tabbar{
        background-image: none;
        background-color: white;
        .regular_width();
        margin: 0 auto;
        .is-selected{
            background: none;
            color: rgb(255,116,114);
            .mint-tab-item-icon{
                background: linear-gradient(45deg,red,rgb(255, 213, 213));
                border-radius: 50%;
                filter: invert(0)!important;
                img{
                    transform: scale(.7);
                    color: white;
                }
            }
        }
        .mint-tab-item{
            .mint-tab-item-icon{
                width: 30px;
                height: 30px;
                filter: invert(.3);
            }
            .mint-tab-item-label{
                a{
                    color: rgb(169,169,169);
                }
            }
        }
    }
}
.sidebar_button{
    width: 20px;
    height: 20px;
    position: relative;
    .count_num{
        position: absolute;
        background: rgb(254,58,59);
        top: -5px;
        left: 17px;
        text-align: center;
        border-radius: 10px;
        font-size: 10px;
        padding: 2px 5px 3px 5px;
    }
}
.searchbar-discovery{
    display: flex;
    justify-content: left;
    align-items: center;
    display: flex;
}
.searchbox{
    flex: 1;
    background: rgb(247,247,247);
    height: 30px;
    border-radius: 400px;
    text-align: left;
    line-height: 30px;
    color: rgb(149,149,149);
    padding-left: 15px;
    font-size: 13px;
}
.tab-podcast{
    display: flex;
    justify-content: left;
    align-items: center;
    display: flex;
}
.tabbox{
    flex: 1;
    height: 30px;
    text-align: center;
    line-height: 30px;
    >.is-selected{
        border-bottom: 4px solid red;
        color: black;
        font-weight:700;
    }
}
.tabbox-item{
    height: 23px;
    font-size: 18px;
    margin-left: 10px;
    margin-right: 10px;
    color: gray;
}
.tab-village{
    display: flex;
    justify-content: left;
    align-items: center;
    display: flex;
}
.info-my{
    display: flex;
    justify-content: left;
    align-items: center;
    display: flex;
}
.infobox{
    flex: 1;
    height: .8rem;
    text-align: center;
    line-height: .8rem;
    transition: opacity ease .6s;
}
.isUserDetailHide{
    opacity: 0;
}
.headpic{
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    background-image: url(../img/icon/user.png);
    background-size: cover;
}
.username{
    display: inline-block;
    color: black;
}
.tab-focus{
    display: flex;
    justify-content: left;
    align-items: center;
    display: flex;
    .icon_img{
        &:nth-of-type(3){
            border-radius: 50%;
            overflow: hidden;
        }
    }
}
.container{
    /* padding-top: 40px;
    padding-bottom: 101px; */
    overflow: hidden;
    width: 100vw;
    height: 100vh
}
.pop-up-layer-login{
    .regular_width();
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #DC2C1F;
    z-index: 11;
}
.buttons-box{
    width: 100%;
    position: absolute;
    bottom: 0;
}
.logo-box{
    width: 1.2rem;
    background: #EF2A24;
    border-radius: 50%;
    padding: .24rem;
    position: absolute;
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
}
.login-button{
    width: 75%;
    padding: .266667rem 0;
    background: white;
    color: #DC2C1F;
    font-size: .373333rem;
    font-weight:600;
    border-radius: 10.666667rem;
    margin: auto;
    margin-bottom: .4rem;
}
.ignore-login-button{
    .login-button{
        border: 1px solid #ccc;
        background: none;
        color: white;
    }
}
.other-login-buttons{
    text-align: center;
    a{
        display: inline-block;
        font-size: 0;
        width: .506667rem;
        border: 1px solid #ccc;
        border-radius: 50%;
        padding: 8px;
        margin:.4rem .266667rem;
    }
}
.agreement-box{
    transform:scale(.75);
    font-size: .293333rem;
    text-align: center;
    margin: .4rem 0 1.466667rem 0;
    color: #dddd;
    font-family: "malgun gothic";
    .agreement-text{
        a{
            color: #f5f5f5;
        };
    }
}
.page-desc{
    width: 100%;
    margin-top: .533333rem;
    padding: .4rem;
}
.main_desc{
    font-size: .48rem;
}
.sub_desc{
    font-size: .346667rem;
    margin-top: .266667rem;
    color: #999;
}
.inputBox-phoneNum{
    margin:.533333rem auto 1.066667rem auto;
    width: 9.093333rem;
    padding: .133333rem 0;
    border-bottom: 1px solid #999;
    display: flex;
    align-items: center;
}
.cc-list-button{
    font-size: .48rem;
    .iconfont{
        padding: 0 .133333rem;
        transform: rotate(90deg);
    }
}
.inputBox{
    flex: 1;
    input{
        display: block;
        font-size: .4rem;
        width: 100%;
    }
}
.pageContent{
    position: relative;
    .login-button{
        width: 91%;
        border: 1px solid #ccc;
        background: #EF2A24;
        color: white;
    }
    .mint-popup-bottom{
        width: 100%;
        height: 90%;
        border-radius: .533333rem .533333rem 0 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .mint-indexlist{
            flex: 1;
            overflow: scroll;
            .mint-indexlist-nav{
                margin-right: .266667rem;
                background: none;
                border: none;
                position: fixed;
                top: 10%;
                .mint-indexlist-navlist{
                    padding: .266667rem 0;
                    border-radius: .533333rem;
                    background: rgba(153, 153, 153, 0.7);
                    color: white;
                    li{
                        padding: .053333rem .026667rem;
                    }
                }
            }
            .mint-indexlist-content{
                overflow:initial
            }
        }
    }
}
.indexList_title{
    display: flex;
    align-items: center;
    padding: .133333rem 0;
}
.indexList_title_icon{
    width: .8rem;
    height: .8rem;
    padding: .266667rem;
}
.indexList_title_name{
    height: .8rem;
    padding: .266667rem;
    font-size: .48rem;
    line-height: .8rem;
}
.mint-cell-wrapper{
    .mint-cell-value{
        margin-right: 1.066667rem;
    }
}
.relate_info_tip{
    padding: .8rem .266667rem .266667rem .266667rem;
    font-size: .506667rem;
}
.relate_info_subtip{
    font-size: .373333rem;
    padding: 0 .266667rem;
    color: #999;
    img{
        width: 25px;
        vertical-align: middle;
    }
}
.countNum{
    color: darkcyan;
    float: right;
}
.ver_codes{
    display: flex;
    justify-content: center;
    list-style: none;
    li{
        width: .8rem;
        height: 15px;
        line-height: 15px;
        text-align: center;
        margin: .933333rem .533333rem;
        padding: .213333rem;
        border-bottom: 1px solid #ccc;
        font-size: .533333rem;
        position: relative;
        >span{
            position: absolute;
            left: 0;
            bottom: -0.026667rem;
            width: 0;
            height: .026667rem;
            background: black;
            transition-property: width;
            transition-duration: .2s;
        }
    }
}
.ver_code_input{
    width: 0;
    overflow: hidden;;
}
.passwordLogin{
    border: 1px solid #ccc;
    border-radius: .8rem;
    padding: .133333rem .266667rem;
    font-size: .32rem;
}
.disabledButton{
    color: #999;
}
.mint-indicator{
    position: fixed;
    z-index: 111;
}
.more_block{
    width: 8.266667rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #F6F6F6;
}
.more-block-header{
    padding: .266667rem;
    display: flex;
    align-items: center;
}
.headerInfo{
    flex: 1;
    .username{
        font-size: .373333rem;
    }
}
.scanIt{
    .icon-saoma{
        font-size: .533333rem;
    }
}
.more-block-content{
    width: 100%;
    flex: 1;
    overflow: scroll;
}
.listBlock{
    margin: .346667rem;
    background: white;
    border-radius: .266667rem;
    overflow: hidden;
    .mint-cell{
        .mint-cell-title{
            .iconfont{
                padding:0 .213333rem;
                font-size: .426667rem;
            }
        }
    }
}
.listBlock-title{
    padding: .266667rem .48rem;
    font-size: .346667rem;
    color: #999;
    background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 50%,transparent 50%);
    background-size: 120% 1px;
    background-repeat: no-repeat;
    background-position: top left;
}
.loginOutClose{
    display: block;
    font-size: .426667rem;
    text-align: center;
    font-weight: bold;
    padding: .266667rem 0;
    color: red;
}
.isOpened{
    font-size: .32rem;
    color: #999;
}
.controlMenu{
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    padding-bottom: 0px;
    position: fixed;
    bottom: 0;
    background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    display: flex;
    align-items: center;
    transition: padding ease .6s;
    .regular_width();
}
.controlMenu_Show{
    padding-bottom: 61px;
}
.musicPic{
    margin-left: 14px;
    width: 45px;
    height: 45px;
    align-self:flex-end;
    border-radius: 50%;
    border: 10px solid black;
    box-sizing: border-box;
    background: white;
    position: relative;
    >div{
        position: absolute;;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
    }
}
.musicTitle{
    flex: 1;
    padding-left: 10px;
}
.theTitle{
    max-width: 5.333333rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.musicName{
    font-size: 16px;
}
.author{
    font-size: 11px;
    color: #999;
}
.musicProgress{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 20px;
    img{
        transform: scale(.5);
    }
}
.musicList{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.song_block{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-size: cover;
}
.song_block_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -11;
    filter: blur(.533333rem);
    background-size: cover;
}
.song_block_bgl{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,black,gray,black);
    opacity: 0.5;
    position: absolute;
    z-index: -10;
}
.song_block_header{
    width: 100%;
    height: 50px;
    display: flex;
    align-self: center;
}
.sb-header-back{
    width: 1.333333rem;
    height: 1.333333rem;
    text-align: center;
    line-height: 1.333333rem;
    span{
        vertical-align: top;
        font-size: .8rem;
        color: white;
    }
}
.sb-header-title{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 1.333333rem;
}
.header-main-title{
    font-size: .48rem;
    color: white;
    max-width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.header-sub-author{
    font-size: .373333rem;
    max-width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ccc;
}
.sb-header-share{
    width: 1.333333rem;
    height: 1.333333rem;
    text-align: center;
    line-height: 1.333333rem;
    span{
        vertical-align: top;
        font-size: .8rem;
        color: white;
    }
}
.song_block_content{
    height: calc(100vh - 160px);
    position: relative;
    >.mint-tab-container{
        height: 100%;
        >.mint-tab-container-wrap{
            height: 100%;
        }
    }
}
.song-block-disc{
    width: 100vw;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.song-block-lyrics{
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.volumeBox{
    padding: .4rem .373333rem;
    >.mt-range{
        height: .266667rem;
        line-height: .266667rem;
        >.mt-range-content{
            >.mt-range-runway{
                right: -0.266667rem;
            }
            >.mt-range-thumb{
                width: .266667rem;
                height: .266667rem;
            }
        }
    }
}
.icon-yinliang{
    font-size: .426667rem;
    padding-right: .373333rem;
    vertical-align: top;
    color: white;
}
.lyricsBox{
    flex: 1;
    overflow: scroll;
    >ul{
        list-style-type: none;
        li{
            padding: .266667rem 0;
            text-align: center;
            color: white;
            font-size: .346667rem;
        }
    }
}
.nowLyrics{
    color: red;
}
.otherThingBox{
    display: flex;
    justify-content: flex-end;
    padding: 0 .533333rem;
    >div{
        >.iconfont{
            height: .586667rem;
            padding: 0 .08rem;
            border: 1px solid white;
            border-radius: 1.333333rem;
            color: white;
            font-size: .373333rem;
            text-align: center;
            line-height: .586667rem;
        }
    }
    .otg2{
        margin-right: .533333rem;
        >.iconfont{
            padding:0 .186667rem;
        }
    }
}
.otg1{
    flex: 1;
    border: 0;
}
.player-bar{
    position: absolute;
    top: 0;
    left: 4.546667rem;
    transition: transform ease .45s;
    transform-origin: .346667rem .32rem;   
    transform: rotate(-22deg);
    width: 2.666667rem;
    z-index: 11;
}
.player-bar-playing{
    transform: rotate(7deg);
}
.player-disc{
    position: relative;
    top: 2.346667rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6.933333rem;
    height: 6.933333rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    .simpleSwipe{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6.666667rem;
        height: 6.666667rem;
        border-radius: 50%;
        transform: translate(-50%,-50%);
        overflow: visible;
        .ss_item_wrap{
            padding-right: 1.610667rem;
            .ssItem{
                .discBox{
                    transform-origin: 3.333333rem 50%;
                }
            }
        }
    }
}

.song_block_control{
    position: absolute;
    bottom: 0;
    height: 110px;
    width: 100%;
}
.other-function{
    flex: 1;
    align-self: end;
    padding:.4rem .8rem;
    display: flex;
    text-align: center;
    >div{
        flex: 1;
        span{
            font-size: .693333rem;
            vertical-align: middle;
            color: white;
        }
    }
}
.control-function{
    margin: auto;
    padding:.4rem .8rem;
    display: flex;
    text-align: center;
    >div{
        flex: 1;
        span{
            font-size: .693333rem;
            vertical-align: middle;
            color: white;
        }
    }
}
.control-progress-bar{
    margin: auto;
    padding: 0 .4rem;
    line-height: .8rem;
}
.progressBar{
    width: 100%;;
    padding: .4rem 0;
    >.mt-range{
        height: .213333rem;
        line-height: .213333rem;
        >.mt-range-content{
            margin-right: .213333rem;
            >.mt-range-runway{
                right: -0.213333rem;
            }
            >.mt-range-thumb{
                width: .213333rem;
                height: .213333rem;
            }
        }
    }
}
.currentTime{
    font-size: .266667rem;
    padding: 0 .133333rem;
    color: white;
    text-align: center;
}
.totalTime{
    font-size: .266667rem;
    padding: 0 .133333rem;
    color: white;
    text-align: center;
}
.control-controller{
    .playNow{
        >span{
            font-size: 1.066667rem;
        }
    }
}
.discBox{
    width: 6.666667rem;
    height: 6.666667rem;
    margin-right: 1.733333rem;
    border-radius: 50%;
    position: relative;
    background-image: url(../img/icon/disc.png);
    background-size: cover;
}
.discpic{
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 3.733333rem;
    height: 3.733333rem;
    border-radius: 50%;
    overflow: hidden;
}
.pop-up-layer-playlist-block{
    >.mint-popup{
        background: none;
    }
}

.pl_block{
    padding: .533333rem;
    border-radius: .533333rem;
    width: 8.266667rem;
    height: 10.666667rem;
    background: #F6F6F6;
    margin-bottom: .533333rem;
}
.pl-header{
    padding-bottom: .533333rem;
}
.pl-content{
    height: 80%;
    padding-right: .533333rem;
    overflow: scroll;
}
.plTitle{
    font-size: .533333rem;
    padding-bottom: .266667rem;
}
.plFunction{
    display: flex;
    font-size: .4rem;
    >div{
        >span{
            font-size: .533333rem
        }
    }
}
.plmode{
    flex: 1;
}
.plcollect{
    flex: 1;
    text-align: center;
}
.pldelete{
    border-left: .026667rem solid #ccc;
    padding-left: .533333rem;
}
.songinfo{
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.songinfoname{
    font-size: .4rem;
}
.songinfoauthor{
    font-size: .32rem;
    color: #999;
}
.songdelete{
    >span{
        font-size: .533333rem;
        color: #999;
    }
}

.icon-zhengzaibofang{
    padding-right: .266667rem;
    line-height: .96rem;
    display: none;
}
.nothingTip{
    text-align: center;
    font-size: .4rem;
    color: #999;
}